<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品进货管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">供应商名称</label>
									<div class="layui-input-inline">
										<select name="providerid" class="providerSelect">
											<option value="">请选择供应商</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">商品名称</label>
									<div class="layui-input-inline">
										<select name="goodsid" class="goodsSelect">
											<option value="">请选择商品名称</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">开始日期</label>
									<div class="layui-input-inline">
										<input type="text" name="startDate" id="startDate" autocomplete="off" class="layui-input" placeholder="请选择开始日期">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">结束时间</label>
									<div class="layui-input-inline">
										<input type="text" name="endDate" id="endDate" autocomplete="off" class="layui-input" placeholder="请选择结束日期">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-block" style="text-align: center;">
										<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">
											<i class="layui-icon layui-icon-search"></i>搜索</a>
										<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="data-reset-btn">
											<i class="layui-icon layui-icon-refresh"></i>重置</a>
									</div>
								</div>
							</div>

					</div>
					</form>
			</div>
			</fieldset>
			<!--表格开始-->
			<table class="layui-hide" id="inportTable" lay-filter="inportFilter"></table>
			<script type="text/html" id="availableTpl">
				<input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用" lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
				</script>
			<script type="text/html" id="inportToolBar">
				<a class="layui-btn layui-btn-sm btn-add" lay-event="addInport">
						<i class="layui-icon layui-icon-addition"></i>添加进货</a>
				</script>
			<script type="text/html" id="inportBar">
				<a class="layui-btn layui-btn-xs btn-update" lay-event="update">编辑</a>
					<a class="layui-btn layui-btn-xs btn-outport layui-btn-warm" lay-event="outport">退货</a>
				</script>
			<!--表格结束-->

			<!--添加和修改的弹层开始-->
			<div id="addOrUpdateDiv" style="display: none; padding: 0.3125rem;">
				<form method="post" class="layui-form layui-form-pane" lay-filter="dataFilter" id="dataFrm">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">供应商名称</label>
							<div class="layui-input-inline">
								<input type="hidden" name="id" />
								<select name="providerid" id="providerid" lay-filter="providerid" class="providerSelect">
									<option value="">请选择供应商</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">商品名称</label>
							<div class="layui-input-inline">
								<select name="goodsid" id="goodsid" lay-filter="goodsid" class="goodsSelect">
									<option value="">请选择商品名称</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">进货价格</label>
							<div class="layui-input-block">
								<input type="text" name="inportprice" id="inportprice" autocomplete="off" placeholder="请输入进货价格" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">进货数量</label>
							<div class="layui-input-block">
								<input type="text" name="number" id="number" autocomplete="off" placeholder="请输入数量" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">支付类型</label>
							<div class="layui-input-block">
								<input type="radio" name="paytype" lay-filter="typeFilter" title="支付宝" value="支付宝" checked="checked">
								<input type="radio" name="paytype" lay-filter="typeFilter" title=" 微信" value=" 微信">
								<input type="radio" name="paytype" lay-filter="typeFilter" title="银联" value=" 银联">
								<input type="radio" name="paytype" lay-filter="typeFilter" title="现金" value="现金">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入内容" class="layui-textarea" name="remark" id="remark"></textarea>
						</div>
					</div>
					<div class=class="layui-form-item" style="text-align: center;">
						<a class="layui-btn" lay-submit="" lay-filter="doSubmit">
							<i class="layui-icon layui-icon-release"></i>立即提交</a>
					</div>
				</form>
			</div>
			<!--添加和修改的弹层结束-->

			<!-- 退货的弹层开始 -->
			<div id="outportDiv" style="display: none; padding: 0.3125rem;">
				<form method="post" class="layui-form layui-form-pane" lay-filter="outportDataFrm" id="outportDataFrm">
					<div class="layui-form-item">
						<label class="layui-form-label">退货数量</label>
						<div class="layui-input-block">
							<input type="hidden" name="goodsid" id="outport_goodsid" />
							<input type="hidden" name="inportid" id="inportid" />
							<input type="text" name="number" autocomplete="off" placeholder="请输入数量" class="layui-input" lay-verify="required|number|checkgoodsnumber">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">退货原因</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入内容" class="layui-textarea" name="remark"></textarea>
						</div>
					</div>
					<div class=class="layui-form-item" style="text-align: center;">
						<a class="layui-btn" lay-submit="" lay-filter="doOutportSubmit">
							<i class="layui-icon layui-icon-release"></i>立即提交</a>
					</div>
				</form>
			</div>
			<!-- 退货的弹层结束 -->
		</div>
		</div>

		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'table', 'layer', 'laydate'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					laydate = layui.laydate,
					layer = layui.layer; // 弹出层


				// 渲染时间选择器		
				laydate.render({
					elem: '#startDate', //指定元素
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate', //指定元素
					type: 'datetime'
				});

				/**
				 * 加载查询条件里面的供应商下拉列表
				 */
				$.get(api + "provider/getAllAvailableProvider", function(res) {
					var providerid = $(".providerSelect");
					var data = res.data;
					var html = "<option value = ''> 请选择供应商 </option>";
					$.each(data, function(index, item) {
						html += "<option value = " + item.id + ">" + item.providername + "</option>";
					});
					providerid.html(html);
					form.render("select");
				})

				/**
				 * 加载查询条件里面的商品下拉列表
				 */
				$.get(api + "goods/getAllAvailableGoods", function(res) {
					var goodsid = $(".goodsSelect");
					var data = res.data;
					var html = "<option value = ''> 请选择商品名称 </option>";
					$.each(data, function(index, item) {
						html += "<option value = " + item.id + ">" + item.goodsname + "【" + item.size + "】" + " </option>";
					});
					goodsid.html(html);
					form.render("select");
				})

				// 加载 数据
				var tableIns = table.render({
					elem: '#inportTable',
					url: api + 'inport/loadAllInport',
					title: '菜单数据表',
					toolbar: '#inportToolBar',
					height: 'full-220',

					cols: [
						[{
								field: 'providername',
								title: '供应商名称',
								align: "center",
								width: 120
							},
							{
								field: 'goodsname',
								title: '商品名称',
								align: "center",
								width: 120
							},
							{
								field: 'number',
								title: '进货数量',
								align: "center",
								width: 100
							},
							{
								field: 'size',
								title: '规格',
								align: "center",
								width: 80
							},
							{
								field: 'inportprice',
								title: '进货价格',
								align: "center",
								width: 100
							},
							{
								field: 'paytype',
								title: '支付类型',
								align: "center",
								width: 110
							},
							{
								field: 'inporttime',
								title: '进货时间',
								align: "center",
								sort: true,
								width: 160
							},
							{
								field: 'operateperson',
								title: '操作员',
								align: "center",
								width: 120
							},
							{
								field: 'remark',
								title: '备注',
								align: "center"
							},

							{
								title: '操作',
								templet: '#inportBar',
								fixed: "right",
								align: "center",
								width: 200
							}
						]
					],
					done: function(data, curr, count) {
						//不是第一页时，如果当前返回的数据为0那么就返回上一页
						if (data.data.length === 0 && curr !== 1) {
							tableIns.reload({
								page: {
									curr: curr - 1
								}
							})
						}
					},
					// limits: [10, 15, 20, 25, 50, 100],
					// limit: 10,
					page: true
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();
					//执行搜索重载
					table.reload('inportTable', {
						page: {
							curr: 1
						},
						url: api + 'inport/loadAllInport?' + params
					});
					return false;
				});

				// 监听重置操作
				form.on('submit(data-reset-btn)', function(data) {
					$("#searchFrm")[0].reset(); // 清空搜索信息框中的数据
					//执行搜索重载
					table.reload('inportTable', {
						page: {
							curr: 1
						},
						url: api + 'inport/loadAllInport'
					});
					return false;
				});

				// 监听表头的事件
				table.on('toolbar(inportFilter)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'addInport':
							addInport();
							break;
					};
				});

				// 监听行数据的事件
				table.on('tool(inportFilter)', function(obj) {
					var data = obj.data; // 获得当前行数据
					if (obj.event == 'update') {
						updateInport(data);
					} else if (obj.event == 'outport') {
						outport(data);
					}
				});

				/**
				 * 监听弹出层里的供应商下拉改变事件
				 */
				form.on("select(providerid)", function(obj) {
					var providerid = obj.value;
					var goodsSelect = $(".goodsSelect");
					initGoodsSeleted(providerid, goodsSelect);
				})

				function initGoodsSeleted(providerid, elem, fun) {
					var html = "<option value =''>请选择商品</option>";
					if (providerid != null) {
						$.get(api + 'goods/getGoodsByProviderId', {
							id: providerid
						}, function(res) {
							$.each(res.data, function(index, item) {
								html += "<option value ='" + item.id + "'>" + item.goodsname + "【" + item.size + "】" + "</option>";
							});
							elem.html(html);
							form.render("select");
							if (fun != undefined) {
								fun();
							}
						})
					} else {
						elem.html(html);
						form.render("select");
					}
				}


				/**
				 * 打开添加进货弹出层
				 */
				var mainIndex;
				var url; // 动态的url
				function addInport() {
					mainIndex = layer.open({
						type: 1,
						title: '添加进货信息',
						area: ['680px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							url = api + "inport/addInport";
							$("#dataFrm")[0].reset();
							$("#providerid").attr("disabled", false);
							$("#goodsid").attr("disabled", false);
							$("#inportprice").attr("disabled", false);
							$("#number").attr("disabled", false);

						}
					})
				}


				/**
				 * 打开进货管理的编辑弹出层
				 */
				function updateInport(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改进货信息',
						area: ['680px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							url = api + "inport/updateInport";
							var providerid = data.providerid;
							var goodsSelect = $(".goodsSelect");
							initGoodsSeleted(providerid, goodsSelect, function() {
								// 装载数据表格
								form.val("dataFilter", data);
							});
							$("#providerid").attr("disabled", true);
							$("#goodsid").attr("disabled", true);
							$("#inportprice").attr("disabled", true);
							$("#number").attr("disabled", true);
							form.render();
						}
					})
				}

				/**
				 * 打开退货的弹出层
				 */
				function outport(data) {
					mainIndex = layer.open({
						type: 1,
						title: "【" + data.goodsname + "】" + '的退货信息',
						area: ['680px'],
						content: $("#outportDiv"),
						success: function(index) {
							url = api + "outport/addOutport";
							$("#dataFrm")[0].reset();
							form.val("outportDataFrm", data);
							form.val("outportDataFrm", {
								number: '',
								inportid: data.id,
								remark: ''
							});
						}
					})
				}

				/**
				 * 提交退货数据
				 */
				form.on('submit(doOutportSubmit)', function(data) {
					var params = $("#outportDataFrm").serialize();
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				});

				/**
				 * 提交数据
				 */
				form.on('submit(doSubmit)', function(data) {
					var params = $("#dataFrm").serialize();
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				});

				/**
				 * 退货数量不能大于库存数 校验
				 */
				form.verify({
					checkgoodsnumber: function(value, item) { //value：表单的值、item：表单的DOM对象
						var str;
						var goodsid = $("#outport_goodsid").val();
						
						$.ajax({
							url: api + "goods/getGoodsByGoodId?goodsid=" + goodsid,
							type: 'get',
							async: false,
							success: function(res) {
								if (res.data.number < value) {
									str = "退货数量不能大于当前商品库存";
								}
							}
						})
						return str;
					}
				});


			});
		</script>
		<script>

		</script>

	</body>
</html>
